<template>
    <div class="box">
        <!-- 顶部导航栏 -->
        <div class="header">
            <van-nav-bar title="个人资料" @click-left="onClickLeft">
                <template #left>
                    <van-icon name="arrow-left" size="18" color="red" />
                </template>
            </van-nav-bar>
        </div>

        <!-- 用户数据 -->
        <div class="form">
            <van-form>
                <van-field v-model="user.username" name="username" label="用户名" placeholder="用户名" :rules="rules.username"
                    readOnly />
                <van-field v-model="user.tel" type="tel" name="tel" label="手机号" placeholder="手机号" :rules="rules.tel"
                    :readonly="readOnly" />
                <van-field v-model="user.email" type="email" name="email" label="邮箱" placeholder="邮箱" :rules="rules.email"
                    :readonly="readOnly" />
                <van-field v-model="user.nickname" type="text" name="nickname" label="昵称" placeholder="昵称"
                    :rules="rules.nickname" :readonly="readOnly" />
            </van-form>
        </div>

        <!-- 上传头像 -->
        <div class="upload">
            <p>上传头像：</p>
            <div class="pic">
                <van-uploader :after-read="afterRead" v-model="fileList" :readonly="readOnly" :deletable="deletable"
                    :max-count="1" @delete="deleteImg" />
            </div>
        </div>

        <!-- 按钮 -->
        <div class="btn">
            <van-button round plain type="warning" color="orangered" @click="readOnly = false; deletable = true"
                v-show="readOnly">修改资料</van-button>
            <van-button plain round type="default" @click="cancel" v-show="!readOnly">取消</van-button>
            <van-button round type="danger" @click="save" v-show="!readOnly">保存</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';
import { Toast } from 'vant';
import { Form } from 'vant';
import { Field } from 'vant';
import { Uploader } from 'vant';
import { Button } from 'vant';
import { getCookie, setCookie } from '@/utils/cookie'
import { getUser, putUser } from '@/request/request'

Vue.use(Button);
Vue.use(Uploader);
Vue.use(Form);
Vue.use(Field);
Vue.use(NavBar);
export default {
    created() {
        this.getUserReq()
    },
    data() {
        return {
            user: {
                username: '',
                tel: '',
                email: '',
                nickname: ''
            },
            rules: {
                username: [
                    { required: true, message: '请填写用户名' },
                    { pattern: /^[a-zA-Z]\w{3,9}$/, message: '必须字母开头，数字字母下划线组成，4~10位' }
                ],
                telephone: [
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }
                ],
                email: [
                    { required: true, message: '请填写邮箱' },
                    { pattern: /^[1-9]\d{4,9}@qq\.com$/, message: '请输入正确的邮箱地址' }
                ],
                nickname: [
                    { required: true, message: '请填写昵称' },
                ]
            },
            reuser: {},
            readOnly: true,
            fileList: [{ url: '', isImage: true }],
            deletable: false
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        //获取用户数据
        async getUserReq() {
            let user = this.$store.state.user
            if (user.username) {
                this.reuser = user
                this.user = Object.assign({}, this.reuser)
                if (this.reuser.image) {
                    this.fileList[0].url = this.reuser.image
                    this.fileList[0].isImage = true
                } else {
                    this.fileList = []
                }
            }
        },
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            file.status = 'uploading';
            file.message = '上传中...';
            this.user.image = file.content
            file.status = 'succeed'
            file.message = ''
        },
        //点击保存按钮
        async save() {
            this.readOnly = true
            this.deletable = false
            var data = await putUser(this.user)
            this.$store.commit('uploadUser', this.user)//更新仓库user
            setCookie('username', this.user.username, 3600)
            Toast.success(data.msg);
        },
        //点击取消按钮
        cancel() {
            this.readOnly = true
            this.deletable = false
            Toast.fail('修改取消');
            this.user = Object.assign({}, this.reuser)
            if (this.reuser.image) { //这里突然报错了之前，不知道为什么这个if
                this.fileList[0] = { url: this.reuser.image, isImage: true }
            }

        },
        deleteImg(file) {
            //删除头像
            delete this.user.image
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    box-shadow: 0 0 15px #e0dfdf;
}

.form {
    margin: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 0 15px #e0dfdf;

    .van-field {
        border-radius: 10px;

    }
}

.btn {
    margin-top: 20px;
    text-align: center;

    .van-button {
        margin: 0 10px;
        width: 120px;
    }
}

.upload {
    font-size: 15px;
    color: rgb(151, 151, 151);
    margin: 0 15px;
    border-radius: 5px;
    box-shadow: 0 0 15px #e0dfdf;
    padding: 1px 10px 10px 10px;

    .pic {
        margin-left: 50px;
    }
}
</style>
